<template>
	<view class="content">
		<!--搜索框开始-->
		<view class="search" @tap="go_search()">
			<image src="../../static/images/search1.png" mode=""></image>
			<text>搜索职位/地点</text>
		</view>
		<view class="work" v-for="(item,index) in works" :key="index" @tap="go_work_detail(item.id)">
			<view class="top">
				<view class="left">
					<text style="overflow: hidden;
		white-space: nowrap;max-width: 84%;
		text-overflow: ellipsis;">{{item.jobName}}</text>
					<view class="type" >{{item.type}}</view>
				</view>
				<text class="right">¥{{item.price}}元</text>
			</view>
			<view class="bottom">
				<view class="bo" style="width: 70%;">
					<text style="color: #F7B952;font-size: 26upx;">{{item.maxPeople}}人</text>
					<text style="overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;">{{item.address}}</text></view>
				<view class="bo">
					<view class="remen">热门</view>
					<text>{{formatTime(item.endTime)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				works: []
			}
		},
		methods: {
			go_search(){
				uni.navigateTo({
					url: 'search'
				});
			},
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return  (da.getMonth() + 1) + "-" + da.getDate();
			},
			go_work_detail(workId){
				uni.navigateTo({
					url: 'workdetail?workId='+workId
				});
			},
			getWork(){
				let that = this;
				utils.get("job/index",{},function(data) {
					that.works = data;
					uni.stopPullDownRefresh();
				});
			}
		},
		onLoad() {
			this.getWork();
		},
		onPullDownRefresh() {
			this.getWork();
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.search {
		width: 92%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: #f6f6f6;
		align-items: center;
		border-radius: 6upx;
	}

	.search image {
		height: 40upx;
		width: 40upx;
	}

	.search text {
		color: #7F7F7F;
		font-size: 26upx;
		margin-left: 6upx;

	}

	.work {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		height: 200upx;
		justify-content: space-between;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}

	.top {
		height: 90upx;
		width: 92%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 80%;
	}

	.left text {
		font-size: 32upx;
		font-weight: 600;

	}

	.right {
		font-size: 30upx;
		color: #FF5924;
		font-weight: 600;

	}

	.type {
		padding: 4upx 8upx;
		font-size: 24upx;
		border: 1px solid #F7B952;
		margin-left: 15upx;
		border-radius: 6upx;
		color: #F7B952;
		margin-left: 20upx;

	}

	.bottom {
		width: 92%;
		height: 80upx;
		color: #999999;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10upx;
		margin-bottom: 20upx;
	}

	.bo {
		font-size: 26upx;
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.remen {
		background: #ee3f4d;
		color: white;
		font-size: 22upx;
		padding: 4upx 8upx;
		border-radius: 6upx;
		text-align: center;
	}
</style>
